<template>
  <div id="mySwiper"
       @mouseleave="show = false"
       @mouseenter="show = true">
    <swiper :options="swiperOption">
      <swiper-slide class="swiper-slide" v-for="(item,index) in images" :key="index">
        <img :src="item"/>
      </swiper-slide>
      <!-- 分页器 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- 左右箭头 -->
      <div v-if="show" class="swiper-button-prev" slot="button-prev"></div>
      <div v-if="show" class="swiper-button-next" slot="button-next"></div>
    </swiper>

  </div>

</template>

<script>
  export default {
    name: "MySwiper",
    components:{

    },
    data(){
      return {
        images:[
            require('../../../assets/images/首页轮播1.png'),
            require('../../../assets/images/首页轮播2.png'),
            require('../../../assets/images/首页轮播3.png'),
            require('../../../assets/images/首页轮播4.png'),
            require('../../../assets/images/首页轮播5.png'),
        ],
        swiperOption:{
          //显示分页
          pagination: {
            el: '.swiper-pagination'
          },
          //设置点击箭头
          navigation: {
            prevEl: '.swiper-button-prev',
            nextEl: '.swiper-button-next'
          },
          autoplay:{
            delay : 2000
          },
          loop: true
        },
        show : false
      }
    },
    methods:{
    }
  }
</script>

<style scoped>
#mySwiper,img{
    width: 100%;
    height: 350px;
}
#mySwiper .swiper-container{
  position: relative;
  width: 100%;
  background: #959fac;
  padding: 0;
}
#mySwiper .swiper-container .swiper-slide{
  width: 100%;
  text-align: center;
}
  .swiper-button-prev,.swiper-button-next{
    background-color: #e4e9f1;
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
/*/deep/.el-carousel__container{*/
/*  height: 350px !important;*/
/*}*/
/*.el-carousel__item h3 {*/
/*  color: #475669;*/
/*  font-size: 14px;*/
/*  opacity: 0.75;*/
/*  line-height: 150px;*/
/*  margin: 0;*/
/*}*/

/*.el-carousel__item:nth-child(2n) {*/
/*  background-color: #99a9bf;*/
/*}*/
/*/deep/.el-carousel__button{*/
/*  background-color: #1d8925;*/
/*}*/

/*.el-carousel__item:nth-child(2n+1) {*/
/*  background-color: #d3dce6;*/
/*}*/

</style>